import { ScrollView, View } from "@tarojs/components";
import { Avatar, Popup, Image, Button, Divider } from "@taroify/core";
import { ShowUserInfoProps } from "@/types/props";
import { getUserinfoApi } from "@/api";
import { useState } from "react";
import { UserType } from "@/types";
import { Plus, EnvelopOutlined, Arrow } from "@taroify/icons";
import { useCustomTheme } from "@/context/ThemeContext";
import { RenderManOrWoman } from "@/utils/render";
import { copy, imgAddPrefix } from "@/utils";
import Taro from "@tarojs/taro";
import ScrollMenu from "../menus/ScrollMenu";

export default ({
  size = "large",
  shape = "circle",
  userID,
  avatar,
  username,
  showName = false,
}: ShowUserInfoProps) => {
  const [user, setUser] = useState<UserType>();
  const [open, setOpen] = useState(false);
  const [ava, setAva] = useState(avatar ?? "");
  const { theme } = useCustomTheme();

  function openInfo() {
    getUserinfoApi(userID).then((res: any) => {
      setUser(res);
      setOpen(true);
    });
  }
  const others = [
    { title: "获赞", value: "48000" },
    { title: "关注", value: "48" },
    { title: "粉丝", value: "4" },
  ];
  function changeTab(e) {
    console.log(e);
  }

  return (
    <View>
      <View onClick={openInfo}>
        {showName ? (
          <View>{username}</View>
        ) : (
          <Avatar src={imgAddPrefix(ava)} size={size} shape={shape} />
        )}
      </View>
      <Popup
        lock
        rounded
        open={open}
        placement="bottom"
        onClose={() => setOpen(false)} // 添加 onClose 处理
        style={{ height: "70%" }}
      >
        <View className="p-4 flex flex-col gap-3">
          <View className="flex justify-between items-end">
            <Image shape="circle" width={180} height={180} src={user?.avatar} />
            <View className="flex gap-2">
              <Button
                className="w-20"
                size="small"
                variant="contained"
                color="primary"
                icon={<Plus />}
                shape="round"
              >
                灌注
              </Button>
              <Button
                className="w-20"
                shape="round"
                size="small"
                variant="outlined"
                color="primary"
                icon={<EnvelopOutlined />}
                onClick={() =>
                  Taro.navigateTo({
                    url: "/pages/message/SendLetter?id=" + user?.kid,
                  })
                }
              >
                发私信
              </Button>
            </View>
          </View>
          <View
            className="font-bold text-lg"
            style={{ color: theme.titleColor }}
          >
            {user?.username}
          </View>
          <View className="text-xs text-gray-400 flex items-end gap-2">
            <View>{RenderManOrWoman(1)}</View>
            <View className="" onClick={() => copy(user?.kid ?? null)}>
              ID:{user?.kid}
            </View>
            <View>{user?.address}</View>
          </View>
          <View className="flex justify-between gap-7">
            <View className="text-sm text-gray-500">
              {user?.signature ?? "这个人还没有简介哦OvO"}
            </View>
            <View className="text-gray-400 text-xs  w-12 flex items-center">
              关于他
              <Arrow />
            </View>
          </View>
          <View className="flex gap-6">
            {others.map((el) => {
              return (
                <View key={el.value}>
                  <View className="flex items-end gap-1">
                    <View className="text-lg font-bold">{el.value}</View>
                    <View className="text-sm">{el.title}</View>
                  </View>
                </View>
              );
            })}
          </View>
          <Divider />
          <ScrollMenu bar change={changeTab}>
            <ScrollMenu.Item title="帖子">
              <ScrollView className="bg-[#F2F2F4]  min-h-72">游戏</ScrollView>
            </ScrollMenu.Item>
            <ScrollMenu.Item title="社会">社会</ScrollMenu.Item>
          </ScrollMenu>
        </View>
        <Popup.Close />
      </Popup>
    </View>
  );
};
